/* eslint-disable no-shadow */
import Vue from 'vue';

// 设计页面模块
export const state = () => ({
  config: {
    size: {},
    // 移动画布的偏移位置{x,y}
    transformxy: {
      x: 0,
      y: 0
    },
    list: [],
    todo: ''
  },
  selection: null,// 默认选择画布，wid， 可以是数组
  selects: [], // 选中的widget.wid
  unselects: [], // 未选中的widget.wid
  selectWidgets: [],
  unselectWidgets: [],


  // 参考线 - [lineType,...]
  lines: [],
  // 正在拖动中，用来判断是否显示外框，即：8个圆点
  moving: false,


  totalSelect: null, // 最外层的框的坐标。 单选或多选时，根据wid获取多个widget，从中获取config，然后在根据位置和大小算出(x,y)和(width,height)
  hover: null, // 鼠标移入 widget
  keydown: {}, // {'shift':16}

  view: {
    // 最左侧，快捷工具
    quickToolBar: {
      visible: true,
      // 顺序可配置
      sort: ['widget', 'manage', 'other'],
      manageSort: ['page', 'master', 'custom', 'datasource']
    },
    // 左侧：页面、母版、自定义、数据源
    leftPane: {
      visible: true,
      // 正在显示的view: page、master、custom、datasource、deleted
      sort: ['page']
    },
    // 右侧属性、事件、代码等
    rightPane:{
      visible: true
    }
  }

  // design: null // 和 @/plugins/design通用
})

export const mutations = {
  /**
   * 移动
   * @param {*} state
   * @param {*} args
   */
  moving(state, args) {
    if (state.moving === true && args) {
      return true
    }
    state.moving = args
    // if (!!args) {
    //     state.moving = [true]
    //     // Vue.set(state, "moving", [true])
    // } else {
    //     state.moving = [false]
    //     // Vue.set(state, "moving", [false])
    // }
  },

  /**
   * 设置画布偏移量 - design.coordinate
   * @param {*} state 
   * @param {*} args 
   */
  setTransformxy(state, args) {
    state.config.transformxy = args
  },

  /**
   * 设置画布大小
   * @param {*} state 
   * @param {*} args 
   */
  setDesignSize(state, args) {
    state.config.size = args
  },

  setkeydown(state, args) {
    Vue.set(state.keydown, args.key, args.value)
  },
  removekeydown(state, key) {
    Vue.delete(state.keydown, key)
  },

  // 设置参考线
  setLines(state, args) {
    if (state.lines.length == 0 && args.length == 0) {
      return true
    }
    state.lines = args
  },


  /**
   * 1、在多选时点击选中，判断是否存在
   */
  selectWidget(state, wid) {
    if (state.selects.indexOf(wid) == -1) {
      // 
      state.selects = [wid]

    }

    if (state.hover == wid) {
      state.hover = null
    }
    this.commit('design/resetBoder')
  },
  /**
   * 选中多个
   * <p> 
   * 1、当选中一个再点击选中时，判断是否选中的是当前的、
   * 2、当选中再点击其中之一时，去除选中
   * </p>
   * @param {*} state 
   * @param {*} widget 
   */
  addSelectWidget(state, wid) {

    if (state.selects.indexOf(wid) == -1) {
      state.selects.push(wid)

      // 
    } else {
      // 如果选中，则去除选中
      this.commit('design/unselectWidget', wid)
    }
    if (state.hover == wid) {
      state.hover = null
    }
    this.commit('design/resetBoder')

  },
  unselectWidget(state, wid) {

    state.selects = state.selects.filter(item => item != wid)

  },
  unselectAll(state) {
    state.selects = []
    this.commit('design/resetBoder')

  },
  hover(state, wid) {
    // 如果选中，则为null
    if (state.selects.indexOf(wid) == -1) {
      state.hover = wid
    } else {
      state.hover = null
    }
  },
  unhover(state) {
    state.hover = null
  },

  /**
   * 根据selects
   * 
   * 重置selects、 unselects、 selectWidgets、 unselectWidgets
   */
  resetAboutSelects(state) {
    // 1、获取所有选中的widget
    let _selectWidgets = window.$design.get(state.selects)
    // 2、获取所有未选中widget
    // 3、获取所有未选中的widget.wid?? 可省略
    let _keys_values = window.$design.getOther2(state.selects)
    let _unselectWidgets = _keys_values.value
    let _unselects = _keys_values.key


    state.selectWidgets = _selectWidgets
    state.unselectWidgets = _unselectWidgets
    state.unselects = _unselects
  },

  /**
   * 根据各个坐标，计算出最终的坐标和大小
   */
  resetBoder(state) {
    if (state.selects.length == 0) {
      state.totalSelect = null
      return true
    }
    if (state.selects.length == 1) {
      let _default = window.$design.get(state.selects[0])
      if (_default == null) {
        state.totalSelect = null
        return true
      }
      state.totalSelect = {
        left: _default.config.left,
        top: _default.config.top,
        // 
        width: _default.config.width,
        height: _default.config.height
      }
      return true
    }


    // 根据wid数组获取
    let _temp = window.$design.get(state.selects)
    // 1、计算出所有widget的四个坐标
    let _lefts = []
    let _tops = []
    let _rights = []
    let _bottoms = []
    for (let key in _temp) {
      let _widget = _temp[key]
      _lefts.push(_widget.config.left)
      _tops.push(_widget.config.top)

      _rights.push(_widget.config.left + _widget.config.width)
      _bottoms.push(_widget.config.top + _widget.config.height)
    }

    // 2、比较四个坐标的大小，获取最外层的坐标
    let minLeft = Math.min(..._lefts)//_lefts.sort((a,b)=>a-b)[0]
    let minTop = Math.min(..._tops)//_tops.sort((a,b)=>a-b)[0]

    let maxBottom = Math.max(..._bottoms)//_bottoms.sort((a,b)=>b-a)[0]
    let maxRight = Math.max(..._rights)// _rights.sort((a,b)=>b-a)[0]
    state.totalSelect = {
      left: minLeft,
      top: minTop,
      // 
      width: maxRight - minLeft,
      height: maxBottom - minTop
    }
  }
}